<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import { testimonialSettings, testimonialBreakpoints } from '@/_mockApis/landingpage/curoselData';
import AOS from 'aos';
import 'aos/dist/aos.css';
import { useI18n } from 'vue-i18n';
import user1Img from '@/assets/images/profile/user-1.jpg';
import user2Img from '@/assets/images/profile/user-2.jpg';
import user3Img from '@/assets/images/profile/user-3.jpg';
import user4Img from '@/assets/images/profile/user-4.jpg';
import user5Img from '@/assets/images/profile/user-5.jpg';

const { t } = useI18n();

// 初始化动画
onMounted(() => {
  AOS.init({
    duration: 800,
    offset: 100,
    once: true,
    easing: 'ease-in-out'
  });
});

// GuaClass系统用户评价
const userReviews = [
  {
    img: user1Img,
    title: t('review.user1.name'),
    subtitle: t('review.user1.position'),
    rating: 5,
    review: t('review.user1.comment')
  },
  {
    img: user2Img,
    title: t('review.user2.name'),
    subtitle: t('review.user2.position'),
    rating: 5,
    review: t('review.user2.comment')
  },
  {
    img: user3Img,
    title: t('review.user3.name'),
    subtitle: t('review.user3.position'),
    rating: 4,
    review: t('review.user3.comment')
  },
  {
    img: user4Img,
    title: t('review.user4.name'),
    subtitle: t('review.user4.position'),
    rating: 5,
    review: t('review.user4.comment')
  },
  {
    img: user5Img,
    title: t('review.user5.name'),
    subtitle: t('review.user5.position'),
    rating: 5,
    review: t('review.user5.comment')
  }
];
</script>
<template>
  <div class="pt-sm-16 pt-10 mt-sm-9 mt-5">
    <v-container class="maxWidth">
      <v-row class="justify-center">
        <v-col cols="12" sm="8" data-aos="fade-up" data-aos-duration="800">
          <h2 class="sectionTitle text-center font-weight-bold">{{ t('review.title') }}</h2>
          <p class="text-center text-subtitle-1 mt-2" data-aos="fade-up" data-aos-delay="200">
            {{ t('review.subtitle') }}
          </p>
        </v-col>
      </v-row>
      <div class="mt-10 testimonials">
        <carousel :settings="testimonialSettings" :breakpoints="testimonialBreakpoints" class="overflow-hidden">
          <slide v-for="(review, index) in userReviews" :key="index" data-aos="fade-up" :data-aos-delay="index * 100"
            data-aos-duration="1000">
            <v-card elevation="10" class="ma-4 review-card">
              <div class="pa-6 text-left">
                <div class="d-flex gap-2">
                  <v-avatar size="40">
                    <img :src="review.img" :alt="review.title" width="40" />
                  </v-avatar>
                  <div>
                    <h6 class="text-h6">{{ review.title }}</h6>
                    <h6 class="text-body-1">{{ review.subtitle }}</h6>
                    <v-rating :model-value="review.rating" readonly size="small" density="compact" color="warning"
                      class="d-sm-none"></v-rating>
                  </div>
                  <div class="ml-auto d-sm-flex d-none">
                    <v-rating :model-value="review.rating" readonly size="small" density="compact"
                      color="warning"></v-rating>
                  </div>
                </div>
                <p class="text-15 mt-6">{{ review.review }}</p>
                <v-icon class="quote-icon">mdi-format-quote-open</v-icon>
              </div>
            </v-card>
          </slide>
        </carousel>
      </div>
    </v-container>
  </div>
</template>

<style scoped>
.review-card {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.quote-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 32px;
  opacity: 0.2;
  color: var(--v-theme-primary);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
